import React, { Component } from 'react';
import axios from './../../axios/index'
import Utils from './../../utils/utils';
import { Card, Table, Form } from 'antd';

export default class Basic extends Component{
	state={
        list:[]
    }
    params={
    	page:1
    }
	componentDidMount(){
		const dataSource = [{
			id: '0',
			username: 'jack',
			sex: '1',
			state: '1',
			interest: '1',
			birthday: '2000-01-01'
		},{
			id: '1',
			username: 'jack1',
			sex: '11',
			state: '11',
			interest: '11',
			birthday: '2000-01-01'
		}]
		this.setState({
			dataSource
		})
		this.request();
	}

	request = ()=>{
        axios.ajax({
            url: '/open_city',
            data:{
                params:{
                    page:this.params.page
                }
            }
        }).then((res)=>{
            let list = res.result.item_list.map((item, index) => {
                item.key = index;
                return item;
            });
            this.setState({
                list:list
            })
        })
    }
	
	render(){
		 const columns = [{
		 	title: 'id',
		 	dataIndex: 'id'
		 },{
		 	title: '用户名',
		 	dataIndex: 'username'
		 },{
		 	title: '性别',
		 	dataIndex: 'sex'
		 },{
		 	title: '状态',
		 	dataIndex: 'state'
		 }, {
		 	title: '爱好',
		 	dataIndex: 'interest'
		 },{
		 	title: '生日',
		 	dataIndex: 'birthday'
		 }]
		return(
			<div>
				<Card title="基础表格">
					<Table
						bordered
						columns = {columns}
						dataSource={this.state.dataSource}
						pagination={false}
					 />
				</Card>
				<Card title="动态数据渲染表格">
					<Table
						bordered
						columns = {columns}
						dataSource={this.state.list}
						pagination={false}
					 />
				</Card>
			</div>

		);
	}
}
